<template>
  <demo-content :title="title">
    <p>
      CSS3 颜色规范中说道，之所以要添加对 HSL 格式的支持，是因为以 RGB
      方式来指定颜色主要有两个缺陷：
    </p>
    <ol>
      <li>以硬件为导向，这种表述颜色的形式是基于阴极射线管的</li>
      <li>它不直观</li>
    </ol>
    <p>
      与 RGB 格式一样，HSL 格式也有三个分量，分别为色相(hue)，饱和度(Saturation)
      和亮度(Lightness)。
    </p>
    <p>
      HSL颜色可以通过一个颜色轮盘(color wheel) 来选取。在轮盘中，红色位于0 度角
      (同时也位于360 度角)，绿色位于120 度角，而蓝色则 位于 240 度角。
    </p>
    <p>
      首先在颜色轮盘中要通过角度来指定HSL
      颜色的第一个分量值。第二个与第三个分量值表示饱和度与亮度。对于饱和度来说，100%
      表示完全饱和，0%则表示灰色。对于亮度来说，100%
      衣示白色，而50%表示正常颜色。
    </p>
    <canvas ref="canvasRef" width="500" height="500"></canvas>
  </demo-content>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { drawMosaic, rect, text } from "./utils";
const title = "颜色";

// 指定组件上的属性
defineOptions({ title });

const canvasRef = ref<HTMLCanvasElement>();
const colors = [
  "#ff00ff",
  "#642",
  "rgba(100, 0, 200, 0.8)",
  "rgb(255,255,0)",
  "hsl(0,100%,50%)",
  "hsla(40,82%,33%,0.6)",
  "antiquewhite",
  "burlywood",
  "cadetblue",
];
onMounted(() => {
  const canvas = canvasRef.value!;
  const ctx = canvas.getContext("2d")!;
  drawMosaic(ctx, { color1: "#ccc" });
  for (let i = 0; i < colors.length; ++i) {
    const h = 30;
    const y = (i + 1) * (h + 10);
    rect.draw(ctx, { x: 10, y: y - 20, w: 50, h, fillStyle: colors[i] });
    text.draw(ctx, {
      text: colors[i],
      x: 80,
      y,
      fontSize: 20,
      fillStyle: "black",
    });
  }
});
</script>

<style src="./default.css" scoped></style>
